import React from 'react';
import PropTypes from 'prop-types';
import { Card, List, Button, Space, Typography, Tag, Popconfirm, Empty } from 'antd';
import { HeartOutlined, DeleteOutlined, CheckOutlined, StarOutlined } from '@ant-design/icons';
import LayoutPreview from './LayoutPreview';

const { Text, Title } = Typography;

/**
 * 布局方案库组件
 * 管理收藏的布局方案
 */
const LayoutLibrary = ({ schemes, onApplyScheme, onDeleteScheme }) => {
  // 格式化时间戳
  const formatTimestamp = (timestamp) => {
    const date = new Date(timestamp);
    return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
  };

  // 获取布局名称
  const getLayoutName = (layoutKey) => {
    const layoutNames = {
      force: '力导向布局',
      circular: '环形布局',
      tree: '树形布局',
      hierarchical: '层次布局',
      radial: '辐射布局',
      grid: '网格布局',
      petal: '花瓣形布局',
      spiral: '螺旋形布局',
      honeycomb: '蜂窝形布局',
      force3d: '3D力导向布局',
      dynamic: '动态流布局'
    };
    
    return layoutNames[layoutKey] || layoutKey;
  };

  return (
    <Card 
      title={
        <Space>
          <HeartOutlined />
          <span>布局方案库</span>
          <Tag color="red">{schemes.length}</Tag>
        </Space>
      }
      size="small"
    >
      {schemes.length > 0 ? (
        <List
          itemLayout="horizontal"
          dataSource={schemes}
          renderItem={(scheme) => (
            <List.Item
              actions={[
                <Button 
                  type="text" 
                  size="small" 
                  icon={<CheckOutlined />} 
                  onClick={() => onApplyScheme(scheme)}
                >
                  应用
                </Button>,
                <Popconfirm
                  title="确定删除此方案？"
                  onConfirm={() => onDeleteScheme(scheme.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button 
                    type="text" 
                    size="small" 
                    icon={<DeleteOutlined />} 
                    danger
                  >
                    删除
                  </Button>
                </Popconfirm>
              ]}
            >
              <List.Item.Meta
                avatar={
                  <div style={{ width: 60, height: 40 }}>
                    <LayoutPreview layoutType={scheme.layout} width={60} height={40} />
                  </div>
                }
                title={
                  <Space>
                    <Text strong>{scheme.name}</Text>
                    <Tag color="blue">{getLayoutName(scheme.layout)}</Tag>
                  </Space>
                }
                description={
                  <Space direction="vertical" size={0}>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      节点: {scheme.dataStructure.nodeCount} | 
                      关系: {scheme.dataStructure.edgeCount}
                    </Text>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      收藏于: {formatTimestamp(scheme.timestamp)}
                    </Text>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无收藏的布局方案"
        >
          <Text type="secondary" style={{ fontSize: '12px' }}>
            调整好布局后点击"收藏方案"按钮添加
          </Text>
        </Empty>
      )}
    </Card>
  );
};

LayoutLibrary.propTypes = {
  schemes: PropTypes.array,
  onApplyScheme: PropTypes.func.isRequired,
  onDeleteScheme: PropTypes.func.isRequired
};

LayoutLibrary.defaultProps = {
  schemes: []
};

export default LayoutLibrary;